<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta content="telephone=no" name="format-detection"/>
    <!-- 解决uc手机字体放大问题 -->
    <meta name="wap-font-scale" content="no">
    <!-- 国产浏览器使用webkit渲染 -->
    <meta name="renderer" content="webkit">
    <title>移动打卡-上报</title>
    <link rel="stylesheet" href="./css/report.css">
    <script src="./js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=6f8f6317c92295856fc9c2c6cdba3bb6"></script>
</head>

<body>
<div id="container">
    <!-- 位置展示框 -->
    <div class="search boderRadius clearfix">
        <div class="search__left">我的位置</div>
        <div class="search__center"></div>
        <div class="search__right"><img src="./imgs/search.png" alt="图标加载失败"></div>
    </div>

    <!-- 上报 -->
    <div class="reportBtns clearfix">
        <div class="wifi">上报WiFi</div>
        <div class="gps">上报GPS</div>
    </div>
    <!-- 上报GPS弹窗 -->
    <div class="reportBox">
        <h4>上报<span class="type">GPS</span>打卡点</h4>
        <p><span class="type">GPS</span>打卡点地址：</p>
        <ul>
            <li class="WS"></li>
            <li class="GS">经度：<span class="lng"></span></li>
            <li class="GS">纬度：<span class="lat"></span></li>
            <li class="GST">对不起暂未获取到您的定位数据，请重新定位！</li>
        </ul>
        <p><span class="type">GPS</span>打卡点名称：</p>
        <div class="clockInAddress">
            <input type="text" placeholder="请输入打卡点名称" value="">
            <img src="./imgs/guanbi.png" alt="图标加载失败">
        </div>
        <p><span class="type">GPS</span>打卡点范围：</p>
        <div class="select__box GS">
            <div class="clockInRange"></div>
        </div>
        <p class="line"></p>
        <ol class="clearfix">
            <li class="cancelReport">取消</li>
            <li class="confirmReport">确认</li>
        </ol>
    </div>

    <!-- 搜索遮罩层 -->
    <div class="searchContent">
        <div class="searchContent__container">
            <div class="searchContent__container--head  clearfix">
                <div class="boderRadius">
                    <input class="searchInput" type="text" placeholder="搜索打卡地址">
                    <img class="search-icon" src="./imgs/search.png" alt="">
                </div>
                <p class="cancel">取消</p>
            </div>
        </div>
    </div>

    <!-- 成功失败提示弹窗 -->
    <div class="response boderRadius">
        <div class="bg">
            <img src="./imgs/card_daytime.png" alt="图片加载失败">
            <p>上报成功</p>
        </div>
        <div class="content">
            <p>数据上报失败，请重新上报，谢谢!</p>
            <div>知道</div>
        </div>
    </div>
</div>
<script src="./js/imJsInterface.js"></script>
<script type="text/javascript">

	// 自动定位开始
	var gpsDeviation = 0; // 打卡半径
	var wifiAddr = ""; // wifi 地址
	var position = {}; // 经纬度
	var type; // "GPS" or "WIFI"  弹窗的文字部分也是用该字段展示
	var marker, map = new AMap.Map("container", {
		resizeEnable: true,
		zoom: 16, //地图显示的缩放级别
	});
	// select option 数据初始化
	var options = [
		{
			title: 50,
			value: 50
		}, {
			title: 100,
			value: 100
		}, {
			title: 200,
			value: 200
		}, {
			title: 500,
			value: 500
		},
	];
	var select = $("<select>");
	select.attr("autocomplete", "off");
	for (var i = 0; i < options.length; i++) {
		let option = $("<option>");
		option.attr("value", options[i].value);
		option.text(options[i].title);
		select.append(option);
	}
	$(".clockInRange").append(select);

	console.log($(".clockInRange option").width());
	console.log($(".clockInRange option").innerWidth());

	// 豆芽接口初始化开始
	imJsInterface = new imJsInterface();
	imJsInterface.getLocationAndWIFIInfo();

	function jsLocationAndWIFIInfoFunc(res) {
		res = JSON.parse(res);
		console.log(res);
		if (res.errorCode != 1) {
			// 重置 position
			position.lng = res.longitude;
			position.lat = res.latitude;
			// 保存WiFi地址
			if (res.isWifiConnected) {
				saveWiFi(res.wifiInfo, res.bssid, res.AppSource);
			} else {
				wifiAddr = "您暂未连接任何WIFI，请重新连接！";
			}
			dealWithSome(position.lng, position.lat);
		} else {
			alert("定位失败，请重新定位");
		}

		// 渲染 wifi 显示
		$(".WS").text(wifiAddr);
		// 赋值打卡范围
		gpsDeviation = Number($("select").val());
	}

	// 保存wifi地址
	function saveWiFi(res, bssid, AppSource) {
		if (AppSource.toLowerCase() == "ios") {
			if (bssid != "" && typeof (bssid) != "undefined") {
				wifiAddr = bssid;
			}
		} else {
			if (typeof res != "undefined") {
				for (var i in res) {
					if (res[i].connected) {
						wifiAddr = res[i].bssid;
						wifiName = res[i].ssid;
					}
				}
			}
		}
	}

	// 豆芽接口初始化结束
	// 搜索弹窗弹出
	$(".search__right").click(function () {
		clearList();
		$(".location_type").css("display", "none");
		$(".searchContent").animate({
			bottom: 0
		});
	});

	// 搜索弹窗取消
	$(".cancel").click(function () {
		$(".location_type").css("display", "block");
		$(".searchContent").animate({
			bottom: "-100" + "%"
		});
		clearList();
	});
	// 搜索地址结束
	var data = [];
	var ul = $("<ul>");

	function clearList() {
		data = [];
		ul.children().remove();
		$(".searchInput").val("");
	}

	$(".search-icon").click(function () {
		// 数据模拟
		var keywords = keywords = $(".searchInput").val();
		ul.children().remove();
		AMap.plugin("AMap.Autocomplete", function () {
			var autoOptions = {
				city: "全国",
			};
			var autoComplete = new AMap.Autocomplete(autoOptions);
			autoComplete.search(keywords, function (status, result) {
				data = result.tips || [];
				ul.addClass("searchContent__container--content");
				if (data.length === 0) {
					var p = $("<p>");
					p.text("暂无数据...");
					p.css({
						color: "rgb(26, 187, 228)",
						"font-size": 12 + "px",
						"text-align": "center"
					});
					ul.append(p);
				} else {
					for (var i = 0; i < data.length; i++) {
						var li = $("<li>");
						li.attr("lng", data[i].location.lng);
						li.attr("lat", data[i].location.lat);
						li.html("<h4>" + data[i].name + "</h4><p>" + data[i].district + data[i].address + "</p>");
						ul.append(li);
					}
				}
				$(".searchContent__container").append(ul);
			});
		});

	});

	// 点击 选择地址
	$(".searchContent__container").on("click", "li", function () {

		var lng = $(this).attr("lng");
		var lat = $(this).attr("lat");
		// 重置  position
		position = {
			lng: "116.40857",
			lat: "39.91448"
		};
		position = {
			lng: $(this).attr("lng"),
			lat: $(this).attr("lat")
		};
		dealWithSome(lng, lat);

	});

	// 处理 去除标记 添加新标记 更新位置，显示详细地址信息
	function dealWithSome(lng, lat) {
		// 去除标记
		if (marker) {
			marker.setMap(null);
			marker = null;
		}

		$(".location_type").css("display", "none");
		$(".searchContent").animate({
			bottom: "-100" + "%"
		});
		map.setZoom(16); //设置地图层级
		map.setCenter([lng, lat]);
		// 添加标记
		marker = new AMap.Marker({
			icon: "https://a.amap.com/jsapi_demos/static/resource/img/user.png",
			position: [lng, lat],
			mageSize: new AMap.Size(36, 36),
			offset: new AMap.Pixel(-18, -36)
		});
		marker.setMap(map);
		getPositionByLonLats(lng, lat);
		renderPosition();
	}

	// 根据经纬度获得详细地址
	function getPositionByLonLats(lng, lat) {
		// console.log("经度："+lng+"纬度"+lat);
		var lnglatXY = [lng, lat];// 地图上所标点的坐标
		AMap.service("AMap.Geocoder", function () {// 回调函数
			geocoder = new AMap.Geocoder({});
			geocoder.getAddress(lnglatXY, function (status, result) {
				if (status === "complete" && result.info === "OK") {
					var address = result.regeocode.formattedAddress;
					$(".search__center").html(address);
				}
			});
		});
	}

	// 上报 wifi以及gps按钮 处理
	$(".reportBtns").on("click", "div", function () {
		var length = $(this).html().length;  // 6 wifi 5 gps
		type = length === 6 ? "WIFI" : "GPS";
		$(".reportBox").show();
		$(".type").text(type);
		switch (type) {
			case "WIFI":
				wifiShow();
				// 判断wifi是否有数据，如果没有 展示 WFS
				break;
			case "GPS":
				gpsShow();
				// 判断wifi是否有数据，如果没有 展示 GFS
				break;
		}
	});

	// WIFI 上报弹窗展示
	function wifiShow() {
		$(".GS, .GST").css("display", "none");
		$(".WS").css("display", "block");
	}

	// GPS渲染经纬度
	function renderPosition() {
		$(".lng").text(position.lng);
		$(".lat").text(position.lat);
	}

	// GPS 上报弹窗展示
	function gpsShow() {
		$(".WS, .GST").css("display", "none");
		$(".GS").css("display", "block");
		if (position.lng) {
			renderPosition();
		} else {
			$(".GS").css("display", "none");
			$(".GST").css("display", "block");
		}
	}

	// 清空input 并隐藏
	function clearHide() {
		// input清空
		$(".clockInAddress > input").val("");
		// 隐藏弹出层
		$(".reportBox").hide();
	}

	// 取消按钮
	$(".cancelReport").click(function () {
		clearHide();
	});

	// 确认按钮
	$(".confirmReport").click(function () {
		var inputVal = $("input").val();
		if (inputVal) {
			switch (type) {
				case "WIFI":
					// 上报wifi接口
					if (wifiAddr.startsWith("您")) {
						return;
					}
					$.post("    /lbfa-web/locRpt/reportWifi.htm", {
						wifiAddr: wifiAddr,
						wifiName: inputVal
					}, function (data, status) {
						dealWiithAjax(data, status);
					});
					break;
				case "GPS":
					// 上报GPS接口
					$.post("/lbfa-web/locRpt/reportGps.htm", {
						gpsName: inputVal,
						gpsDeviation: gpsDeviation,
						gpsAmapX: position.lng,
						gpsAmapY: position.lat
					}, function (data, status) {
						dealWiithAjax(data, status);
					});
					break;
			}
			clearHide();
		} else {
			alert("请填写名称");
		}

	});

	// 上报的ajax处理逻辑
	function dealWiithAjax(data, status) {
		var code = JSON.parse(data).code;
		if (status == "success") {
			switch (code) {
				case 0:
					// 成功处理
					$(".response").show();
					$(".response .bg p").text("上报成功");
					$(".response .content p").text("");
					break;
				default:
					$(".response").show();
					$(".response .content p").text("数据上报失败，请重新上报，谢谢!");
					$(".response .bg p").text("上报失败");
			}
		} else {
			alert("请求失败，请稍后再试");
		}
	}

	// 知道了  点击 关闭提示弹窗
	$(".response .content div").click(function () {
		$(".response").hide();
	});

	// 点击输入框的清空按钮
	$(".clockInAddress > img").click(function () {
		// 清空input
		$(this).prev().val("");
	});

	$(".clockInRange").on("change", "select", function (e) {
		// 赋值打卡范围
		gpsDeviation = Number($(this).val());
	});

</script>
</body>

</html>